<script setup>
import Card from "@/componments/Card.vue";
import { Setting, Switch, Lock } from "@element-plus/icons-vue/global";
import { reactive, ref } from "vue";
import {ElMessage} from "element-plus";
import {get, post} from "@/net/index.js";

const checkList = ref(["Value A", "Value B", "Value C"]);
const form = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: ""
});
const validateNewPassword = (rule, value, callback) => {
  if (value === form.oldPassword) {
    callback(new Error('新密码不能与当前密码相同'));
  } else {
    callback();
  }
};

const validateConfirmPassword = (rule, value, callback) => {
  if (value !== form.newPassword) {
    callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
};

const rules = reactive({
  oldPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' },
    { validator: validateNewPassword, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
});



const formRef = ref();
const saving = ref(true);
const privacy = reactive({
  phone: false,
  email: false,
  qq: false,
  vx: false,
  gender: false

})
get("api/user/get_privacy", data => {
  saving.value = false;
  console.log('Fetched data:', data);
  privacy.phone = data.phone === 1;
  privacy.email = data.email === 1;
  privacy.qq = data.qq === 1;
  privacy.vx = data.vx === 1;
  privacy.gender = data.gender === 1;
});
function changePrivacy(type,status){
  saving.value = true;
  post("api/user/save_privacy", {
    type: type,
    status: status,
  }, () => {
    ElMessage.success("修改隐私成功")
    saving.value = false;
  })
}

const submitForm = () => {
  formRef.value.validate((valid, errors) => {
    if (valid) {
      post("api/user/change_pwd",form, () =>{
        // 重置表单数据
        formRef.value.resetFields();
        ElMessage.success("修改密码成功")
      })


    } else {
      const firstErrorMessage = Object.values(errors)[0][0].message;
      ElMessage.error(firstErrorMessage)
      return false;
    }
  });
};

</script>

<template>
  <div style="margin: auto; max-width: 600px">
    <div style="margin-top: 20px">
      <card :icon="Setting" title="隐私设置" desc="在这里设置哪些内容可以被其他人看到，请各位小伙伴注意自己的隐私" v-loading=saving>
        <div class="checkbox">
          <el-checkbox label="公开展示我的手机号" @change="changePrivacy('phone',privacy.phone)" v-model="privacy.phone" />
          <el-checkbox label="公开展示我的电子邮件地址"  @change="changePrivacy('email',privacy.email)"  v-model="privacy.email" />
          <el-checkbox label="公开展示我的QQ号"  @change="changePrivacy('qq',privacy.qq)"  v-model="privacy.qq" />
          <el-checkbox label="公开展示我的微信号"  @change="changePrivacy('vx',privacy.vx)"  v-model="privacy.vx" />
          <el-checkbox label="公开展示我的性别"  @change="changePrivacy('gender',privacy.gender)"  v-model="privacy.gender" />
        </div>
      </card>
      <card style="margin-top: 20px" :icon="Setting" title="修改密码" desc="修改密码请在这里操作，请务必牢记你的密码">
        <el-form ref="formRef" label-width="120px" style="margin: 20px" :model="form" :rules="rules">
          <el-form-item label="当前密码" prop="oldPassword">
            <el-input :prefix-icon="Lock" v-model="form.oldPassword" type="password" placeholder="请输入当前密码" />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input :prefix-icon="Lock" type="password" v-model="form.newPassword" placeholder="请输入新密码" />
          </el-form-item>
          <el-form-item label="再次输入密码" prop="confirmPassword">
            <el-input :prefix-icon="Lock" type="password" v-model="form.confirmPassword" placeholder="请再次输入密码" />
          </el-form-item>
          <div style="text-align: center">
            <el-button :icon="Switch" type="primary" @click="submitForm">立即重置密码</el-button>
          </div>
        </el-form>
      </card>
    </div>
  </div>
</template>

<style scoped>
.checkbox {
  display: flex;
  flex-direction: column;
  margin-right: 10px; /* 调整复选框之间的水平间距 */
}
</style>
